<template>
  <cu-layout :navProp="{ placeholder: true }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-search-list`]" :style="{ height: `calc(100vh - ${$Platform.navbar}px)` }">
      <uv-sticky offsetTop="0" :customNavHeight="$Platform.navbar">
        <view class="input-box" @click="handleSearch">
          <uv-input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" placeholder="想住哪儿?" shape="circle" v-model="params.text"></uv-input>
          <!-- <uv-button type="plain">搜索</uv-button> -->
        </view>
        <!-- 搜索条件列表 -->
        <!-- <search-list @scroll="scroll" :fixedHeiht="118" @emit-change-data="handleChangeSearch" @emit-change-icon="changeIconStatus" :list="list"></search-list> -->
      </uv-sticky>
      <view class="house-list">
        <template v-if="params.resultType === 1">
          <view v-if="params.resultType === 1" class="no-data" :style="{ height: `calc(100vh - ${$Platform.navbar}px - 72px)` }">
            <text>暂无匹配门店 </text>
            <text>更换其他搜索条件试试</text>
          </view>
        </template>
        <template v-else>
          <view class="house-item" v-for="(item, index) in projects" :key="index">
            <view class="project-name" @click="handleProjectDetail(item)">{{ item.name }} <uv-icon name="arrow-right" size="12" color="#a0a0a0"></uv-icon> </view>
            <view class="project-tag" v-for="(tag, tagIndex) in item.marketing_tag" :key="tagIndex">{{ tag }}</view>
            <view class="project-address">{{ item.address }}</view>
            <scroll-view class="scroll-view" scroll-x="true">
              <!-- 这里放置你需要滚动的内容 -->
              <view v-for="(items, indexs) in item.room_type_list" :key="index" class="project-item" @click="handleRoomDetail(items)">
                <img class="cover" :src="items.roomTypeCover" />
                <img class="is-video" :src="$CDN('/customer/static/images/icons/has-video.png')" />
                <view class="room-title">{{ items.roomTypeTitle }}</view>
                <view class="room-price">
                  {{ items.minPrice }}
                  <span class="unit">元/间/月起</span>
                </view>
              </view>
            </scroll-view>
          </view>
        </template>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { getStorageCache } from '@/common/cache'
import { mapActions, mapGetters } from 'vuex'
import { filterItem, projectSearch } from './api'
export default {
  name: 'listPage',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      list: [
        { title: '位置距离', key: 'business_district', options: [], value: {}, icon: 1 },
        { title: '距离最近', key: 'distance', icon: 0, value: '' },
        { title: '价格排序', key: 'price', icon: 0, value: '' },
        { title: '租金·特色', key: 'districts', options: [], value: [], icon: 1 },
      ],
      projects: [],
      params: {
        text: '',
        page: 1,
        limit: 20,
        orderBy: '',
        minPrice: '',
        resultType: 0, // 如果为1 则表示搜索不到数据
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['cityConfig', 'locationInfo']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    // console.log('🚀 ~ onLoad ~ options:', options)
    this.getData()
    this.getHousingSearchParams()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {
    if (this.params.resultType === 1) return
    this.params.page++
    this.getData()
  },

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    isChinese(str) {
      // 匹配中文字符的正则表达式
      var reg = /[\u4e00-\u9fa5]/
      return reg.test(str)
    },
    changeAreaData(data) {
      let map = { districts: '', business_district: '', subway: [] }
      const dataMap = data.value
      for (let key in dataMap) {
        if (this.isChinese(key)) {
          if (dataMap[key].length) {
            map.business_district = dataMap[key]
          } else {
            map.districts = [key]
          }
        } else {
          if (dataMap[key].length) {
            map.subway = [...dataMap[key]]
          } else {
            map.subway.push(key)
          }
        }
      }
      return map
    },
    async getData() {
      const { cityId } = this.cityConfig
      const { longitude, latitude } = this.locationInfo
      const { longitude: longitude2, latitude: latitude2, suggestion_search_tag, auth_location, suggestion_search_key } = this.$Route.query
      const historyList = await getStorageCache('history')
      // tips 解决输入框显示值错误的bug
      this.params.text = historyList[0].suggestion_search_key
      const { orderBy, minPrice, page, limit } = this.params
      const areaData = this.list[0].value
      const filterData = this.list[3].value
      const areaDataValue = this.changeAreaData(areaData)
      const params = {}
      for (let key in areaDataValue) {
        params[key] = JSON.stringify(areaDataValue[key])
      }
      filterData.forEach((v) => {
        if (v.name === 'price') {
          const price = v.value.match(/\d+/g)
          params['minPrice'] = price[0]
          params['maxPrice'] = price[1] || 10000
        } else {
          params[v.name] = JSON.stringify(v.value)
        }
      })
      // params.business_district = JSON.stringify(business_district)
      const { data } = await projectSearch({
        text: this.params.text,
        longitude,
        latitude,
        longitude2,
        latitude2,
        suggestion_search_tag,
        auth_location,
        city_id: cityId,
        page,
        limit,
        ...params,
        orderBy,
      })
      this.params.resultType = data.resultType
      if (this.params.resultType === 1) {
        this.projects = data.projects
      } else {
        this.projects = [...this.projects, ...data.projects]
      }
    },
    // 获取搜索参数
    async getHousingSearchParams() {
      const { cityId } = this.cityConfig
      const { data } = await filterItem({ cityId })
      // console.log('data', data)
      //   this.housingDataParams.filterList = data.filterList
      this.list[0].options = data.options.filter((item) => {
        if (item.name === '商圈' || item.name === '地铁') {
          item.children = item.children.map((v) => {
            v.id = v.id || v.name
            v.field = v.id ? v.id : v.name
            return v
          })
        }
        return item.name != '公司'
      })
      this.list[3].options = data.filter
      if (data.priceList.length) {
        const ojb = {
          name: 'price',
          title: '租金预算',
          list: data.priceList || [],
          value: [],
        }
        this.list[3].options.unshift(ojb)
      }

      this.list[3].options.map((v) => {
        v.value = []
        return v
      })
    },
    scroll(value) {
      this.isScroll = value
      uni.pageScrollTo({
        scrollTop: this.scrollTop,
        duration: 200,
      })
    },
    // 跳转项目
    handleProjectDetail({ id }) {
      this.$ROUTE.go('/pages/subpackage/housing-resources/housing-detail/index', { projectId: id })
    },
    // 跳转对应的类型
    handleRoomDetail({ roomTypeId, projectId }) {
      // console.log('123', roomTypeId, projectId)
      this.$ROUTE.go('/pages/subpackage/housing-resources/room-detail/index', { roomTypeId, projectId })
    },
    handleChangeSearch({ index = '', value = false }) {
      if (index !== '') {
        if (index === 1 || index === 2) {
          this.params.orderBy = value
        } else {
          this.list[index].value = value
        }
        this.projects = []
        this.params.page = 1
        this.getData()
      }
    },
    changeIconStatus(index = '') {
      this.list.forEach((v) => {
        if (v.icon == 2) {
          v.icon = 1
        }
      })
      if (index !== '') {
        this.list[index].icon = 2
      }
      if (index === '') {
        this.list.forEach((v) => {
          if (v.value && v.value.length) {
            v.icon = 3
          }
        })
      }
    },
    handleSearch() {
      const { text } = this.params
      this.$ROUTE.go('/pages/subpackage/search-page/index', { text })
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('search-list')} {
  background: #f5f5f5;
  box-sizing: border-box;
  .input-box {
    background: white;
    padding: 30rpx;
    display: flex;
    ::v-deep .uv-input {
      border-radius: 10rpx !important;
    }
  }
  .house-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 16rpx;
    .no-data {
      background: white;
      width: 100%;
      height: 148rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      line-height: 40rpx;
      justify-content: center;
    }
    .no-data-title {
      font-weight: 600;
      font-size: 16px;
      color: #222222;
      margin: 0 32rpx;
      margin-bottom: 32rpx;
    }

    .house-item {
      width: calc(100% - 16px);
      padding: 24rpx 32rpx;
      background: white;
      box-sizing: border-box;
      border-radius: 10rpx;
      margin: 0 16rpx;
      margin-bottom: 16rpx;
      .project-name {
        font-weight: 600;
        font-size: 16px;
        color: #222222;
        display: flex;
        ::v-deep .uv-icon {
          margin-left: 10rpx;
        }
      }
      .project-tag {
        display: inline-block;
        font-weight: 400;
        font-size: 10px;
        color: #878a92;
        padding: 2rpx 8rpx;
        margin: 18rpx 8rpx 18rpx 0;
        background: #f0f3f7;
        border-radius: 8rpx;
      }
      .project-address {
        font-weight: 400;
        font-size: 11px;
        color: #666666;
      }
      .scroll-view {
        width: 100%;
        height: auto;
        margin-top: 16rpx;
        white-space: nowrap;
        .project-item {
          width: 240rpx;
          height: 264rpx;
          margin-right: 16rpx;
          display: inline-block;
          position: relative;
          .cover {
            width: 240rpx;
            height: 180rpx;
            background: #fff3eb;
            border-radius: 16rpx;
          }
          .is-video {
            width: 40rpx;
            height: 40rpx;
            position: absolute;
            left: 16rpx;
            top: 16rpx;
          }
          .room-title {
            margin: 8rpx 0;
            font-weight: 400;
            font-size: 12px;
            color: #222222;
          }
          .room-price {
            font-weight: 600;
            font-size: 16px;
            color: $uv-primary;
            .unit {
              font-size: 10px;
              color: #999999;
            }
          }
        }
      }
    }
  }
}
</style>
